
// 回到顶部
class ToTop{
    constructor(ops){
        this.aside = ops.aside;
        this.scrolltop = ops.scrolltop;
        // console.log();
        this.scroll();
        this.t = null;
    }
    scroll(){
        document.onscroll = ()=>{
            let dT = document.documentElement.scrollTop;
            let sT = this.scrolltop.offsetTop;
      
        }
        this.aside.onclick = ()=>{
            // console.log(1);
            clearInterval(this.t)
            this.t=setInterval(()=>{
                document.documentElement.scrollTop -=100;
                // console.log(document.documentElement.scrollTop);
                if(document.documentElement.scrollTop ==0){
                    clearInterval(this.t)
                }
            },30)
        }
    }
}
let totop = new ToTop({
    aside:document.querySelector("#aside .aside-2"),
    scrolltop:document.querySelector("#shop")
});

// 放大镜
function BigImg(ops){
    this.bBox = ops.bBox
    this.bImg = ops.bImg
    this.sBox = ops.sBox
    this.sImg = ops.sImg
    this.sSpan = ops.sSpan
    this.addEvent();
}
BigImg.prototype.init = function(){
    this.sSpan.style.width = this.bBox.offsetWidth / this.bImg.offsetWidth * this.sBox.offsetWidth + "px";
    this.sSpan.style.height = this.bBox.offsetHeight / this.bImg.offsetHeight * this.sBox.offsetHeight + "px";
}
BigImg.prototype.addEvent = function(){
    const that = this;
    this.sBox.onmouseover = function(){
        that.show();
    }
    this.sBox.onmouseout = function(){
        that.hide();
    }
    this.sBox.onmousemove = function(eve){
        const e = eve || window.event;
        that.move(e);
    }
}
BigImg.prototype.show = function(){
    this.sSpan.style.display = "block";
    this.bBox.style.display = "block";
    this.init();
}
BigImg.prototype.hide = function(){
    this.sSpan.style.display = "none";
    this.bBox.style.display = "none";
}
BigImg.prototype.move = function(e){
    let l = e.pageX - this.sSpan.offsetWidth/2 - this.sBox.offsetLeft;
    let t = e.pageY - this.sSpan.offsetHeight/2 - this.sBox.offsetTop;
    if(l<0) l=0;
    if(t<0) t=0;
    if(l>this.sBox.offsetWidth-this.sSpan.offsetWidth){
        l=this.sBox.offsetWidth-this.sSpan.offsetWidth
    }
    if(t>this.sBox.offsetHeight-this.sSpan.offsetHeight){
        t=this.sBox.offsetHeight-this.sSpan.offsetHeight
    }
    this.sSpan.style.left = l + "px";
    this.sSpan.style.top = t + "px";
    const x = l / (this.sBox.offsetWidth-this.sSpan.offsetWidth);
    const y = t / (this.sBox.offsetHeight-this.sSpan.offsetHeight);
    this.bImg.style.left = -(this.bImg.offsetWidth - this.bBox.offsetWidth) * x + "px";
    this.bImg.style.top = -(this.bImg.offsetHeight - this.bBox.offsetHeight) * y + "px";
}
new BigImg({
    sBox:document.querySelector(".shop-top-l"),
    sImg:document.querySelector(".shop-top-l img"),
    sSpan:document.querySelector(".shop-top-l span"),
    bBox:document.querySelector(".shop-top-r"),
    bImg:document.querySelector(".shop-top-r img")
})





// 选项卡
function Tab(){
    this.li = document.querySelectorAll(".cont li");
    this.div = document.querySelectorAll(".shop-top-l img");
    this.div2 = document.querySelectorAll(".shop-top-r img");
}
Tab.prototype.bianhao = function(){
    for(var i=0;i<this.li.length;i++){
        this.li[i].hao = i;
    }
}
Tab.prototype.bangdingshijian = function(){
    const that = this;
    for(var i=0;i<this.li.length;i++){
        this.li[i].onclick = function(){
            for(var i=0;i<that.li.length;i++){
                that.li[i].className = ""
            }
            this.className = "active";
            that.xianshineirong(this.hao)
        }
    }
}
Tab.prototype.xianshineirong = function(index){
    for(var i=0;i<this.div.length;i++){
        this.div[i].style.display = "none";
    }
    this.div[index].style.display = "block";
    this.div2[index].className = "active";
}






const id = location.search.split("=")[1];
$.ajax({

    // url:"../data/goods.json",
    url:"http://localhost:3000/api1?type=goods",
    success:res=>{
      res = JSON.parse(res).data
      let i=0;
      res.some((val,index)=>{
          i=index;
          return val.goodsId == id;
      })
    //   console.log(res[i]);
      const bimg = document.querySelector("#shop-top-r");
      bimg.innerHTML =`
      <img src="${res[i].bigImg}" alt="" >
      `;
      const simg = document.querySelector("#shop-top-l");
    //   console.log(res[i]);
      simg.innerHTML =`
      <img src="${res[i].proImg}" alt="" >
      <img src="${res[i].simg2}" alt="" >
      <img src="${res[i].simg3}" alt="" >
      <span></span>
      `;
      const jname=document.querySelector(".product-name h1");
      jname.innerHTML=`<h1> ${res[i].proName}</h1>
      `;
      const introduce1=document.querySelector(".product-name h2");
      introduce1.innerHTML=`<h2> ${res[i].introduce}</h2>
      `;
      const nbreak1=document.querySelector(".product-after-top-l h1")
      nbreak1.innerHTML=`<h1> ${res[i].nbreak}</h1>
      `;
      const overtime1=document.querySelector(".product-after-top-l p")
      overtime1.innerHTML=`<p> ${res[i].overtime}</p>
      `;
      
      const pcolor2=document.querySelector("#pcolor")
    // console.log(res[i].pcolor);
      pcolor2.innerHTML=` ${forbba(res[i].pcolor)}
      `;
      const pstyle1=document.querySelector("#pstyle")
      pstyle1.innerHTML=` ${forb(res[i].pstyle)}
      `;
      new BigImg({
        sBox:document.querySelector(".shop-top-l"),
        sImg:document.querySelector(".shop-top-l img"),
        sSpan:document.querySelector(".shop-top-l span"),
        bBox:document.querySelector(".shop-top-r"),
        bImg:document.querySelector(".shop-top-r img")
    })
    
    var t = new Tab();
t.bianhao();
t.bangdingshijian();
    }
  })



  function forbba(arr){
      let str ="";
      arr.forEach(val=>{
          str+=`
          <li >
             <h2>${val}</h1>
            </li>
          `
      })
      return str;
  }
  function forb(arr){
      let str ="";
      arr.forEach(val=>{
          str+=`
          <li >
             <h2>${val}</h1>
            </li>
          `
      })
      return str;
  }